import React from 'react';
import { Table, Popconfirm, Button } from 'antd';
const ProductList = ({ onDelete, products }) => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
        <Button>Delete</Button>
      </Popconfirm>
    );
    },
  }];
  return (
    <div>
      <h2>List of Products</h2>
      <Table rowKey={record=>record.id} dataSource={products} columns={columns}/>);
    </div>
  );

};

export default ProductList;
